<template>
    <view>
        <view class="pub_tabbar">
            <div class="li" :class="{ 'li_active': active == key,'li_middle': 2 == key }" v-for="(li, key) in list" :key="key"
                @click="liClick(li)">
                <pub-image class="img" :src="active == key ? li.selectedIconPath : li.iconPath" />
                <div class="text">{{ li.text }}</div>
            </div>
        </view>
        <!-- 版本更新 -->
        <div class="pub_app_update" v-show="$store.state.appUpdate">
            <div class="box">
                <!-- <div class="title">发现新版本</div> -->
                <div class="p_1">为了更好的体验，<br>我们已经更新了最新版，<br>期待你的更新！</div>
                <div v-if="$store.state.deviceType == 'android'">
                    <div class="btn" v-if="download == 0" @click="toDownload">立即更新</div>
                    <div class="pro" v-if="download == 1">
                        <div class="pro_has" :style="{ width: download_progress }"></div>
                    </div>
                    <div class="btn" v-if="download == 2">下载完成</div>
                </div>
                <div v-if="$store.state.deviceType == 'ios'">
                    <div class="btn" @click="toCopy">复制下载链接</div>
                </div>
            </div>
        </div>
        <!-- 维护中 -->
        <div class="pub_app_update" v-show="$store.state.preserve">
            <div class="box">
                <pub-image class="logo" :src="'../../static/logo.png'" />
                <div class="title">平台正在更新维护中</div>
                <div class="p_1">期待这一次的维护 <br> 能给您更好的购物体验</div>
            </div>
        </div>
        <div class="pub_ad_box" v-if="adShow">
            <div class="ad_div">
                <div class="img_box">
                    <image class="img" :src="adSrc" mode="widthFix"></image>
                </div>
                <div class="close icon-font-basic icon-b-off-5" @click="adShow = false"></div>
            </div>
        </div>
    </view>
</template>

<script>
export default {
    props: {
        active: {
            type: Number,
            default: 0,
        },
        adSrc: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            list: [
                {
                    needLogin: false,
                    pagePath: "/pages/home/index",
                    iconPath: "../../static/tabbar/img_1.png",
                    selectedIconPath: "../../static/tabbar/img_2.png",
                    text: "首页",
                },
                {
                    needLogin: false,
                    pagePath: "/pages/ecology/index",
                    iconPath: "../../static/tabbar/img_3.png",
                    selectedIconPath: "../../static/tabbar/img_4.png",
                    text: "生态",
                },
                {
                    needLogin: false,
                    pagePath: "/pages/panic_buy/index",
                    iconPath: "../../static/tabbar/img_10.png",
                    selectedIconPath: "../../static/tabbar/img_11.png",
                    text: "幸运区",
                },
                {
                    needLogin: false,
                    pagePath: "/pages/order/index",
                    iconPath: "../../static/tabbar/img_5.png",
                    selectedIconPath: "../../static/tabbar/img_6.png",
                    text: "订单",
                },
                {
                    needLogin: false,
                    pagePath: "/pages/mine/index",
                    iconPath: "../../static/tabbar/img_7.png",
                    selectedIconPath: "../../static/tabbar/img_8.png",
                    text: "我的",
                },
            ],

            download: 0, //0立即下载 1下载中 2下载完成
            download_progress: "0%",
            adShow: false,
        };
    },
    watch: {
        'adSrc': {
            handler() {
                if (this.adSrc && this.active == 0) {
                    this.adShow = true;
                }
            },
            immediate: true,
            deep: true
        },
    },
    methods: {
        liClick(info) {
            // console.log(info);
            if (info.needLogin && !this.$comFun.getUserToken()) {
                this.$comFun.toast("请先登录");
                setTimeout(() => {
                    this.$comFun.openWin("/pages/login/login_psd");
                }, 500);
                return;
            }
            uni.switchTab({
                url: info.pagePath,
            });
        },
        toDownload() {
            const that = this;
            that.download = 1;
            that.download_progress = "0%";
            // console.log(this.$store.state.appUpdate);
            const downloadTask = uni.downloadFile({
                url: this.$store.state.appUpdate, //仅为示例，并非真实的资源
                success: (res) => {
                    // console.log(res);
                    if (res.statusCode === 200) {
                        that.download = 2;
                        plus.runtime.install(
                            plus.io.convertLocalFileSystemURL(res.tempFilePath),
                            { force: true },
                            function (res) {
                                that.$comFun.toast("安装成功，即将重新启动");
                                setTimeout(() => {
                                    plus.runtime.restart();
                                }, 1000)
                            },
                            function (error) {
                                that.$comFun.toast("安装失败，请稍后再试");
                            }
                        );
                    }
                },
            });

            downloadTask.onProgressUpdate((res) => {
                that.download_progress = res.progress + "%";
            });
        },
        toCopy() {
            const that = this;
            uni.setClipboardData({
                data: this.$store.state.appUpdate,
                showToast: false,
                success: function () {
                    that.$comFun.toast("复制成功，请前往浏览器打开");
                },
            });
        },
    },
};
</script>

<style lang="scss" scoped></style>
